<template>
  <div id="wrap">
    <div class="head">
      <div class="head-content">
        <p>
          北京
          <span class="iconfont icon-triangle-down"></span>
        </p>
        <span class="iconfont icon-fangdajing"></span>
        <input type="text" placeholder="南窑国际" />
      </div>
      <div>
        <span class="iconfont icon-tubiao_ditu">&nbsp;地图</span>
      </div>
    </div>

    <div id="content">
      <navTop />
      <navContent />
      <div class="select">
        <h3>
          <span @click="selectOne()">帮我找房子</span>
          <span @click="selectTwo()">我的房子</span>
        </h3>
        <div>
          <component :is="com"></component>
        </div>
        <h4>立即找房</h4>
      </div>

      <moods />

      
        <div class="live">
          <span>直播看房</span>
        <span>视频讲房</span>
        </div>
        <div class="lives">
           <Live v-for="(v,i) in this.$store.state.gddata.livedata" :key="i" :title="v.title" :make="v.make" :img="v.img"></Live>
        </div>
        
      

      <div class="bot">
        <Details v-for="(v,i) in this.$store.state.gddata.obj" :key="i" :title="v.title" :details="v.details" :total="v.total" :price="v.price" :img="v.img" />
      </div>
    </div>

    <BottomBar />
  </div>
</template>

<script>
import BottomBar from "com/bottomBar.vue";
import navTop from "com/home/navTop.vue";
import navContent from "com/home/navContent.vue";
import selectOne from "com/home/selectOne.vue";
import selectTwo from "com/home/selectTwo.vue";
import moods from "com/home/moods.vue";
import Live from "com/home/live.vue";
import Details from "com/home/details.vue"
export default {
  components: {
    BottomBar,
    navTop,
    navContent,
    selectOne,
    selectTwo,
    moods,
    Live,
    Details,
  },
  data() {
    return {
      com: "",
    };
  },
  methods: {
    selectOne() {
      this.com = selectOne;
    },
    selectTwo() {
      this.com = selectTwo;
    },
  },
  mounted: function () {
    this.selectOne();
    this.$store.dispatch("homelist");
    this.$store.dispatch("livelist")
  },
};
</script>

<style scoped>
#wrap {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.head {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  font-size: 0.15rem;
}
.head span{
  font-size: 0.15rem;
}
.head p {
  margin-right: 0.1rem;
}
.head input {
  width: 1.38rem;
  border: none;
  outline: none;
  margin-left: 0.1rem;
}
.head-content {
  width: 2.5rem;
  border: #e9eaea 0.01rem solid;
  border-radius: 0.1rem;
  display: flex;
  flex-direction: row;
  padding: 0.18rem 0.1rem 0.18rem 0.1rem;
}
#content {
  margin-top: 0.2rem;
  overflow-y: auto;
}
.select {
  height: 2rem;
  border: #eaebed 0.01rem solid;
  margin: auto;
  margin: 0 0.1rem 0 0.1rem;
  margin-top: 0.3rem;
}
.select h3 {
  font-weight: bold;
  font-size: 0.16rem;
  
}
.select h3 span {
  display: inline-block;
  padding: 0.23rem 0 0.15rem 0;
  height: 100%;
  border-bottom: 0.04rem solid #e4e7f0;
  margin-left: 0.2rem;
}
.select h4 {
  height: 0.44rem;
  border-top: #ebebed 0.01rem solid;
  color: #135ef3;
  text-align: center;
  font-weight: bold;
  line-height: 0.44rem;
  font-size: 0.16rem;
}
.live {
  font-weight: bold;
  margin-top: 0.4rem;
 
}
.live span {
  margin-left: 0.2rem;
}
.lives{
  display: flex;
   overflow-y: auto;
}
.bot{
   margin-bottom: 0.5rem;
}
</style>